/**
 * 批量导出
 */
const ctxPath = document.getElementById("ctxPath").value;

// 创建一个 link 标签
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = ctxPath+"/templatesJs/util/batchUtil.css"; // 请确保路径正确
// 将 link 标签插入到 <head> 中
document.head.appendChild(link);

export default {
    template: `
        <div class="uploadDivCss">
            <el-dialog :visible.sync="uploadDialog" width="760" title="数据导入" :before-close="cancel">
                <div v-if="uploadObj.active == 0">
                    <div style="width: 760px; height: 90px; display: flex; justify-content: center; align-items: center;">
                        <div style="width: 90%; height: 80%;">
                            <el-steps :active="uploadObj.active" align-center>
                                <el-step title="上传文件"></el-step>
                                <el-step title="导入数据"></el-step>
                                <el-step title="导入完成"></el-step>
                            </el-steps>
                        </div>
                    </div>
    
                    <div style="width: 760px;height: 396px;display: flex;flex-direction: column;align-items: center;">
                        <div>
                            <div style="width: 700px; height: 140px;">
                                <div style="width: 700px;height: 120px;display: flex;border: 1px solid #e9e9e9">
                                    <div style="width: 100px;height: 120px;display: flex; justify-content: center; align-items: center;background-color: #f5f5f5">
                                    <span style="width: 45px;height: 36px;">
                                        <img src="${ctxPath}/static/img/icon/dialogDown.svg" style="width: 45px;height: 36px">
                                    </span>
                                    </div>
                                    <div style="width: 600px;height: 120px;">
                                        <div style="width: 570px;height: 100px;padding: 20px 0 0 20px">
                                            <div>
                                                <div style="height: 30px;">
                                                    <span style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;font-weight: 700; font-size: 14px;">填写导入数据信息</span>
                                                </div>
                                                <div style="height: 20px;">
                                                    <span style="font-family: '微软雅黑', sans-serif;font-weight: 400;color: #999999;font-size: 14px">请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</span>
                                                </div>
                                                <div>
                                                    <el-button type="text" @click="exportTemplate">下载模板</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 700px; height: 140px;">
                                <div style="width: 700px;height: 120px;display: flex;border: 1px solid #e9e9e9">
                                    <div style="width: 100px;height: 120px;display: flex; justify-content: center; align-items: center;background-color: #f5f5f5">
                                    <span style="width: 45px;height: 36px;">
                                        <img src="${ctxPath}/static/img/icon/dialogUpload.svg" style="width: 45px;height: 36px">
                                    </span>
                                    </div>
                                    <div style="width: 600px;height: 120px;">
                                        <div style="width: 570px;height: 100px;padding: 20px 0 0 20px">
                                            <div>
                                                <div style="height: 30px;">
                                                    <span style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;font-weight: 700; font-size: 14px;">上传填好的信息表</span>
                                                </div>
                                                <div style="height: 20px;">
                                                    <span style="font-family: '微软雅黑', sans-serif;font-weight: 400;color: #999999;font-size: 12px">文件后缀名必须为xls 或xlsx （即Excel格式），文件大小不得大于10M，最多支持导入3000条数据</span>
                                                </div>
                                                <div>
                                                    <el-upload
                                                            class="upload-demo"
                                                            ref="uploadUser"
                                                            :action="uploadUrl"
                                                            :file-list="fileList"
                                                            :auto-upload="false"
                                                            :on-success="handleSuccess"
                                                            :on-error="handleError"
                                                            :accept="'.xls,.xlsx'"
                                                            :on-change="handleChange"
                                                            :on-remove="handleRemove"
                                                    >
                                                        <el-button type="text" v-show="fileList.length == 0">点击上传</el-button>
                                                    </el-upload>
                                                    <!--                                            <el-button type="text">上传文件</el-button>-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 700px; height: 78px;background-color: #fff5e6;border-radius: 6px !important">
                                <div style="width: 600px;height: 50px;padding: 20px 0 0 20px;display: flex">
                                    <div style="width: 35px;height: 30px">
                                    <span>
                                        <img src="${ctxPath}/static/img/icon/warn.svg" style="width: 24px;height: 24px">
                                    </span>
                                    </div>
                                    <div style="width: 500px;height: 50px;">
                                        <div style="height: 25px">
                                            <span >特别提示</span>
                                        </div>
                                        <div>
                                        <span style="'微软雅黑 Regular', '微软雅黑', sans-serif;color: #999999;font-size: 14px;">
                                            导入过程中如发现同名客户，且对该客户数据有更新权限，则更新这条客户数据
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div style="width: 100%;height: 60px;border-top: 2px solid #ebebeb">
                        <el-button type="primary" style="float: right;margin-top: 12px;margin-right: 20px;width: 80px;height: 30px;padding-top: 8px;" @click="next">下一步</el-button>
                    </div>
                </div>
                <div v-if="uploadObj.active == 1">
                    <div style="width: 760px; height: 546px; display: flex; justify-content: center; align-items: center;">
                        <div style="width: 700px; height: 100px;">
                            <div style="width: 700px;height: 50px;font-size: 16px;display: flex; justify-content: center;">{{uploadObj.percentage}}%</div>
                            <div style="width: 700px;height: 50px;">
                                <el-progress :stroke-width="12" :show-text="false" :percentage="uploadObj.percentage"></el-progress>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="uploadObj.active == 2">
                    <div v-if="uploadObj.code == 200" style="width: 760px; height: 546px; display: flex; justify-content: center; align-items: center;flex-direction: column;">
                        <div style="width: 80px;height: 85px;">
                            <span>
                                <img src="${ctxPath}/static/img/icon/dialogSuccess.svg" style="width: 72px;height: 72px"></img>
                            </span>
                        </div>
                        <div style="width: 120px;height: 40px;">
                            <span style="font-size: 20px;color: #666666;font-weight: bold">数据导入完成</span>
                        </div>
                        <div style="width: 220px;height: 50px;text-align: center">
                            <span style="font-size: 14px;color: #999999">{{uploadObj.message}}</span>
                        </div>
                    </div>
                    <div v-else style="width: 760px; height: 546px; display: flex; justify-content: center; align-items: center;flex-direction: column;">
                        <div style="width: 700px; height: 90px; display: flex; justify-content: center; align-items: center;">
                            <div style="width: 90%; height: 80%;">
                                <el-steps :active="uploadObj.active" align-center>
                                    <el-step title="上传文件"></el-step>
                                    <el-step title="导入数据"></el-step>
                                    <el-step title="导入完成"></el-step>
                                </el-steps>
                            </div>
                        </div>
                        <div style="width: 700px;height: 100px;border: 1px solid #e9e9e9;display: flex">
                            <div style="width: 100px;height: 100px;display: flex; justify-content: center; align-items: center;background-color: #f5f5f5">
                                <span style="width: 40px;height: 40px;">
                                    <img src="${ctxPath}/static/img/icon/dialogdp.svg" style="width: 40px;height: 40px">
                                </span>
                            </div>
                            <div style="width: 400px;height: 80px;padding: 10px 0 0 16px">
                                <p style="font-weight: 700;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif">正常数量条数: <span style="font-weight: 400;color: #19BE6B;font-family: '微软雅黑', sans-serif">{{uploadObj.successSize}}条</span></p>
                                <p style="font-weight: 700;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif">异常数量条数: <span style="font-weight: 400;color: #F56C6C;font-family: '微软雅黑', sans-serif">{{uploadObj.failSize}}条</span></p>
                            </div>
                        </div>
        
                        <div style="width: 700px;height: 256px;margin-top: 20px;padding: 15px 0 0 15px;border: 1px solid #e9e9e9;background-color: #f9f9f9;overflow: auto">
                            <span style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;font-weight: 700">异常提示：</span>
                            <div style="margin-top: 10px;line-height: 32px;color: #666666;font-size: 12px;font-weight: 400;font-family: '微软雅黑', sans-serif" v-html="uploadObj.message"></div>
                        </div>
        
                        <div style="width: 760px;height: 60px;margin-top: 20px;border-top: 2px solid #ebebeb">
                            <el-button type="primary" style="float: right;margin-top: 12px;margin-right: 20px;width: 80px;height: 30px;padding: 0 0 0 0;" @click="reload" plain>重新上传</el-button>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
    `,
    props: {
        expUrl: {
            type: String,
            default: ''
        },
        upUrl: {
            type: String,
            default: ''
        },
        isVisible: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        isVisible: {
            immediate: true,
            handler(val) {
                this.resetData();
                this.uploadDialog = val;
            }
        },
        upUrl: {
            immediate: true,
            handler(val) {
                this.uploadUrl = val;
            }
        },
        expUrl: {
            immediate: true,
            handler(val) {
                this.exportUrl = val;
            }
        },
    },
    data() {
        return {
            uploadDialog: false,
            uploadUrl: '',
            exportUrl: '',
            fileList: [],
            //上传后对象
            uploadObj: {
                active: 0,  //步骤条
                percentage: 0,  //上传进度条
                code: 0,
                message: '',
                successSize: 0,
                failSize: 0
            },
        }
    },
    create() {
        this.fileList = [];

        this.uploadObj.active = 0;
        this.uploadObj.percentage = 0;
    },
    methods: {
        cancel() {
            this.resetData();
            this.$emit('cancel');
        },
        resetData() {
            this.uploadObj = {
                active: 0,  //步骤条
                percentage: 0,  //上传进度条
                code: 0,
                message: '',
                successSize: 0,
                failSize: 0
            }
            this.fileList = [];
        },
        //下载模板
        exportTemplate() {
            window.open(this.exportUrl);
        },

        //步骤
        next() {
            this.uploadObj.active++;
            if (this.uploadObj.active == 1) {
                if (this.fileList.length == 0) {
                    this.$message({message: '请先选择文件', type: 'warning', duration: 2000, showClose: true});
                    this.uploadObj.active = 0;
                    return;
                }
                this.$refs.uploadUser.submit();

                let interval = setInterval(() => {
                    if (this.uploadObj.percentage >= 98 || this.uploadObj.active == 2) {
                        clearInterval(interval);
                    } else {
                        this.uploadObj.percentage += 1;
                    }
                }, 30); // 每 100 毫秒增加 1%
            }
        },

        //重新上传
        reload() {
            this.uploadObj = {};
            this.uploadObj.active = 0;
            this.fileList = [];
            this.uploadObj.percentage = 0;
        },

        // 上传文件
        submitUpload() {
            if (this.fileList.length === 0) {
                this.$message({message: '请先选择文件', type: 'warning', duration: 2000, showClose: true});
                return;
            }
            this.$refs.uploadUser.submit();
        },

        // 文件上传成功的回调
        handleSuccess(response) {

            this.uploadObj.active = 2;

            this.uploadObj.code = response.code;
            if(response.data.message){
                this.uploadObj.message = response.data.message;
            }else {
                this.uploadObj.message = response.data;
            }


            if (response.code === 400) {
                this.uploadObj.successSize = response.data.successSize;
                this.uploadObj.failSize = response.data.failSize;
            }
            this.fileList = [];
        },

        // 文件上传失败的回调
        handleError(response) {
            this.$message({message: "文件上传失败", type: 'error', duration: 2000, showClose: true});
            this.reload();
        },

        // 文件格式判断
        handleChange(file) {
            this.fileList = [];
            var mat = file.name.split(".").pop();
            if (mat != 'xls' && mat != 'xlsx') {
                this.$message({message: '只允许上传.xls和.xlsx文件', type: 'error', duration: 2000})
                return;
            }
            this.fileList = [file];
        },

        //文件删除
        handleRemove() {
            this.fileList = [];
        },
    }
};



